<template>
  <div class="charge-container">
    <el-table :data="vipProductList" border style="width: 100%" v-loading="loading">
      <el-table-column align="center" label="产品图片" width="130">
        <!-- 插槽作用域 -->
        <!-- <template v-slot="aa">
          {{ aa.row.imageUrl }}
          <el-avatar :src="aa.row.imageUrl" shape="square" fit="scale-down" :size="80"> </el-avatar>
        </template> -->

        <template v-slot="{ row }">
          <el-avatar
            shape="square"
            :size="80"
            fit="fill"
            :src="row.imageUrl"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="productName" align="center" label="产品名称">
      </el-table-column>
      <el-table-column prop="description" align="center" label="产品描述">
      </el-table-column>
      <el-table-column prop="price" align="center" label="价格(元)">
      </el-table-column>
      <el-table-column prop="inventory" align="center" label="库存">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <!-- 加上“is-disabled”的class名即可以视觉上通过element-ui样式模仿禁用按钮 -->
          <el-button
            v-isBuy="row.inventory"
            type="primary"
            @click="pre_order(row)"
            icon="iconfont icon-vip3"
            >充值</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as payApi from "@/api/pay";
export default {
  //自定义指令 isBuy: 库存为0的时候禁用按钮
  directives: {
    isBuy: {
      inserted(el, binding) {
        //console.log(el, binding);
        //库存如果是0
        //给元素加上 is-disabled类名
        //保存元素之前的类名
        if(binding.value==0){
          let oldClassName=el.className
          el.className=oldClassName+"  is-disabled"
          el.disabled=true//真正的禁用按钮
        }
      },
    },
  },

  async created() {
    //打开加载动画
    this.loading=true
    let res = await payApi.getVipProduct();
    //关闭加载动画   
    this.loading=false
    //console.log(res);
    this.vipProductList = res.data.data;
  },
  data() {
    return {
      vipProductList: [],
      loading: true,
    };
  },
  meta: {
    title: "vipCharge",
    icon: "iconfont icon-chongzhi",
  },
  methods: {
    pre_order(row) {
      //console.log(row);
      this.$confirm('您正在充值'+row.description, '充值提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          //点击了确定按钮

          // 1.将当前下单的产品对象 currentProduct 存储到vuex中
          this.$store.commit("SET_CURRENTPRODUCT",row)
          // 2.跳转到下单页面pre_order
          this.$router.push({name: "pre_order"})
          // this.$message({
          //   type: 'success',
          //   message: '充值成功!'
          // }); 
        }).catch(() => {
          //点击了取消按钮
          this.$message.warning("已取消购买")
          // this.$message({
          //   type: 'info',
          //   message: '取消充值'
          // });          
        });
    },
  },
};
</script>
<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
.el-button--primary {
  background-color: #05a000;
}
</style>
